<template>
  <div class="audition241">
    <h3><strong>常用Loader</strong></h3>
    <p>babel-loader：通过babel编译js代码</p>
    <p>css-loader: 转译css文件，会对@import和url()进行处理，就像js解析import/require一样</p>
    <p>style-loadder: 把css-loader转译后的结果插入输出的脚本中显示样式效果</p>
    <p>less-loader: 编译和转换.less文件</p>
    <p>file-loader: 将一个文件中的加载文件、图片import/require()解析为url,并且将文件发送到输出文件夹，并返回文件的publicURL</p>
    <p>url-loader: 是file-loader功能的扩展和封装，options选项中可以设置对引用图片大小的限制，<br />如果大于等于限制，默认使用file-loader并传递所有参数，如果小于，则默认使用base64编码并返回输出</p>
    <h3><strong>常用Plugin</strong></h3>
    <p>extract-text-webpackplugin: 将js文件中引用的样式单独抽离成css文件</p>
    <p>MiniCssExtractPlugin: 抽离css文件，删除和压缩css代码，本插件是extract-text-webpackplugin插件的webpack5的升级用法，可以实现contenthash</p>
    <p>HtmlWebpackPlugin: 可以根据模板自动生成html代码，并自动引用css和js文件</p>
    <p>HotModuleReplacementPlugin: 热更新，原理是根据hash值是否改变来重新编译</p>
  </div>
</template>

<script>
export default {
  name: 'Audition241'
}
</script>

<style>

</style>